<?php echo $this->Html->css('nv.d3'); ?>
<style>
    body {
        overflow-y:scroll;
    }

    text {
        font: 12px sans-serif;
    }

    .mypiechart {
        width: 500px;
        border: 2px;
    }
</style>
<div class="grid_container"> 

    <div class="grid_6">       
        <div class="widget_wrap">
            <div class="widget_top">
                <span class="h_icon list"></span>
                <h6>Reportes por Genero</h6>
            </div>
            <div class="widget_content">                 
                <svg id="test1" class="mypiechart"></svg>                                                                
                    <div class="stat_block">
                        <h4>Detalle</h4>
                        <table>
                            <tbody>
                                <tr>
                                    <td>
                                        <b>Varones</b>
                                    </td>
                                    <td>
                                        <?php echo $cantidadVarones; ?>
                                    </td>                                    
                                </tr>
                                <tr>
                                    <td>
                                        <b>Mujeres</b>
                                    </td>
                                    <td>
                                        <?php echo $cantidadMujeres; ?>
                                    </td>                                    
                                </tr>                                
                                <tr>
                                    <td align="right">
                                        <b>Total</b>
                                    </td>
                                    <td>
                                        <?php echo $cantidadMujeres+$cantidadVarones; ?>
                                    </td>                                    
                                </tr>
                            </tbody>                            
                        </table>                        
                    </div>                                
            </div>
        </div>
    </div>

    <div class="grid_6">       
        <div class="widget_wrap">
            <div class="widget_top">
                <span class="h_icon list"></span>
                <h6>Reportes</h6>
            </div>
            <div class="widget_content">
                <svg id="lugares" class="mypiechart"></svg> 
                <div class="stat_block">
                        <h4>Detalle</h4>
                        <table>
                            <tbody>
                                <tr>
                                    <td>
                                        <b>Ciudad</b>
                                    </td>
                                    <td>
                                        <?php echo $cantidadCiudad; ?>
                                    </td>                                    
                                </tr>
                                <tr>
                                    <td>
                                        <b>Provincia</b>
                                    </td>
                                    <td>
                                        <?php echo $cantidadProvincia; ?>
                                    </td>                                    
                                </tr>                                
                                <tr>
                                    <td align="right">
                                        <b>Total</b>
                                    </td>
                                    <td>
                                        <?php echo $cantidadCiudad+$cantidadProvincia; ?>
                                    </td>                                    
                                </tr>
                            </tbody>                            
                        </table>                        
                    </div> 
                <span class="clear"></span>
            </div>
        </div>
    </div>
    
    <span class="clear"></span>

    <div class="grid_6">       
        <div class="widget_wrap">
            <div class="widget_top">
                <span class="h_icon list"></span>
                <h6>Reportes por Genero</h6>
            </div>
            <div class="widget_content">               
                <svg id="tipoAtencion" class="mypiechart"></svg>  
                <div class="stat_block">
                        <h4>Detalle</h4>
                        <table>
                            <tbody>
                            <?php $cantidadtotal = 0;?>
                                <?php foreach ($tipoAtencion as $ta): ?>
                                <tr>
                                    <td>
                                        <b><?php echo $ta['Trauma']['nombre']; ?></b>
                                    </td>
                                    <td>
                                        <?php echo $ta['0']['cantidad']; ?>
                                        <?php $cantidadtotal = $cantidadtotal + $ta['0']['cantidad'];?>
                                    </td>                                    
                                </tr>
                                <?php endforeach;?>
                                                               
                                <tr>
                                    <td align="right">
                                        <b>Total</b>
                                    </td>
                                    <td>
                                        <?php echo $cantidadtotal; ?>
                                    </td>                                    
                                </tr>
                                
                            </tbody>                            
                        </table>                        
                    </div>                              
                <span class="clear"></span>
            </div>
        </div>
    </div>

    <div class="grid_6">       
        <div class="widget_wrap">
            <div class="widget_top">
                <span class="h_icon list"></span>
                <h6>Reportes por Edad</h6>
            </div>
            <div class="widget_content">               
                <svg id="edad" class="mypiechart"></svg> 
                <div class="stat_block">
                        <h4>Detalle</h4>
                        <table>
                        
                            <tbody>
                                <tr>
                                    <td>
                                        <b>Ninez</b>
                                    </td>
                                    <td>
                                        <?php echo $cantidadNinos; ?>
                                    </td>                                    
                                </tr>
                                <tr>
                                    <td>
                                        <b>Adolecentes</b>
                                    </td>
                                    <td>
                                        <?php echo $cantidadAdolecentes; ?>
                                    </td>                                    
                                </tr>
                                <tr>
                                    <td>
                                        <b>Jovenes</b>
                                    </td>
                                    <td>
                                        <?php echo $cantidadAJovenes; ?>
                                    </td>                                    
                                </tr>
                                <tr>
                                    <td>
                                        <b>Adulto Mayor</b>
                                    </td>
                                    <td>
                                        <?php echo $cantidadAMayor; ?>
                                    </td>                                    
                                </tr>
                                <tr>
                                    <td>
                                        <b>Tercera Edad</b>
                                    </td>
                                    <td>
                                        <?php echo $cantidadTedad; ?>
                                    </td>                                    
                                </tr>                                
                                <tr>
                                    <td align="right">
                                        <b>Total</b>
                                    </td>
                                    <td>
                                        <?php echo $cantidadNinos+$cantidadAdolecentes+$cantidadAJovenes+$cantidadAMayor+$cantidadTedad; ?>
                                    </td>                                    
                                </tr>
                            </tbody>                            
                        </table>                        
                    </div>                               
                <span class="clear"></span>
            </div>
        </div>
    </div>

</div>
<script src="<?php $this->webroot; ?>js/graficos/d3.v2.min.js"></script>
<script src="<?php $this->webroot; ?>js/graficos/nv.d3.min.js"></script>
<script src="<?php $this->webroot; ?>js/graficos/src/models/legend.js"></script>
<script src="<?php $this->webroot; ?>js/graficos/src/models/pie.js"></script>
<script src="<?php $this->webroot; ?>js/graficos/src/models/pieChart.js"></script>
<script src="<?php $this->webroot; ?>js/graficos/src/utils.js"></script>
<script>

    //datos y graico por genero
    var testdata = [
        {
            key: "Varones",
            y: <?php echo $cantidadVarones; ?>
        },
        {
            key: "Mujeres",
            y: <?php echo $cantidadMujeres; ?>
        }
    ];


    nv.addGraph(function() {
        var width = 500,
                height = 500;

        var chart = nv.models.pieChart()
                .x(function(d) {
            return d.key
        })
                .y(function(d) {
            return d.y
        })
                //.showLabels(false)
                .values(function(d) {
            return d
        })
                .color(d3.scale.category10().range())
                .width(width)
                .height(height);

        d3.select("#test1")
                .datum([testdata])
                .transition().duration(1200)
                .attr('width', width)
                .attr('height', height)
                .call(chart);

        chart.dispatch.on('stateChange', function(e) {
            nv.log('New State:', JSON.stringify(e));
        });

        return chart;
    });

    //datos grafico por ciudad o provincia
    var lugar = [
        {
            key: "Ciudad",
            y: <?php echo $cantidadCiudad; ?>,
        },
        {
            key: "Provincia",
            y: <?php echo $cantidadProvincia; ?>,
        }
    ];


    nv.addGraph(function() {
        var width = 500,
                height = 500;

        var chart = nv.models.pieChart()
                .x(function(d) {
            return d.key
        })
                .y(function(d) {
            return d.y
        })
                //.showLabels(false)
                .values(function(d) {
            return d
        })
                .color(d3.scale.category10().range())
                .width(width)
                .height(height);

        chart.pie.donutLabelsOutside(true).donut(true);

        d3.select("#lugares")
                .datum([lugar])
                .transition().duration(1200)
                .attr('width', width)
                .attr('height', height)
                .call(chart);

        chart.dispatch.on('stateChange', function(e) {
            nv.log('New State:', JSON.stringify(e));
        });

        return chart;
    });

    //datos y grafico por tipo de atencion
    var tipoAtencion = [
<?php foreach ($tipoAtencion as $ta): ?>
            {
                key: "<?php echo $ta['Trauma']['nombre']; ?>",
                y: <?php echo $ta['0']['cantidad']; ?>
            },
<?php endforeach; ?>
    ];


    nv.addGraph(function() {
        var width = 500,
                height = 500;

        var chart = nv.models.pieChart()
                .x(function(d) {
            return d.key
        })
                .y(function(d) {
            return d.y
        })
                //.showLabels(false)
                .values(function(d) {
            return d
        })
                .color(d3.scale.category10().range())
                .width(width)
                .height(height);

        d3.select("#tipoAtencion")
                .datum([tipoAtencion])
                .transition().duration(1200)
                .attr('width', width)
                .attr('height', height)
                .call(chart);

        chart.dispatch.on('stateChange', function(e) {
            nv.log('New State:', JSON.stringify(e));
        });

        return chart;
    });

    //datos y grafico por edad
    var edad = [
        {
            key: "Ninez (1 a 13)",
            y: <?php echo $cantidadNinos; ?>,
        },
        {
            key: "Adolecentes (14 a 18)",
            y: <?php echo $cantidadAdolecentes; ?>,
        },
        {
            key: "Adulto Joven (19 a 30)",
            y: <?php echo $cantidadAJovenes; ?>,
        },
        {
            key: "Adulto Mayor (31 a 60)",
            y: <?php echo $cantidadAMayor; ?>,
        },
        {
            key: "Tercera Edad (60 para adelante)",
            y: <?php echo $cantidadTedad; ?>,
        }
    ];


    nv.addGraph(function() {
        var width = 500,
                height = 500;

        var chart = nv.models.pieChart()
                .x(function(d) {
            return d.key
        })
                .y(function(d) {
            return d.y
        })
                //.showLabels(false)
                .values(function(d) {
            return d
        })
                .color(d3.scale.category10().range())
                .width(width)
                .height(height);

        d3.select("#edad")
                .datum([edad])
                .transition().duration(1200)
                .attr('width', width)
                .attr('height', height)
                .call(chart);

        chart.dispatch.on('stateChange', function(e) {
            nv.log('New State:', JSON.stringify(e));
        });

        return chart;
    });

</script>